<template>
  <div class="category-video-body">
    <div :class="['category-list', categoryFixed ? 'category-fixed' : '']" id="category-list">
      <div class="category-title">
        {{ categoryStore.currentPCategory.categoryIdName }}
      </div>
      <div :class="['category-item', !route.params.categoryCode ? 'active' : '']" @click="jump()">
        首页
      </div>
      <div
        :class="['category-item', route.params.categoryCode == item.categoryCode ? 'active' : '']"
        v-for="item in categoryStore.currentPCategory.children"
        :key="item.categoryId"
        @click="jump(item)"
      >
        {{ item.categoryIdName }}
      </div>
    </div>
    <VideoList></VideoList>
  </div>
</template>

<script setup lang="ts">
import { useCategoryStore } from '@/stores/category'
import { onMounted, onUnmounted, ref } from 'vue'
import VideoList from './VideoList.vue'
import { useRoute, useRouter } from 'vue-router'
import { mitter } from '@/eventbus/eventBus'
import { useNavActionStore } from '@/stores/navAcrionStore'

const route = useRoute()
const router = useRouter()
const categoryStore = useCategoryStore()
const navActionStore = useNavActionStore()

const categoryFixed = ref(false)
const categoryTopDistance = ref(200)

let initScrollTop = 0
let scrollDown = true

const scrollHandler = (curScrollTop: number) => {
  categoryFixed.value = true
  // 判断滚动方向
  if (curScrollTop - initScrollTop > 0) {
    scrollDown = true
  } else {
    scrollDown = false
  }
  // 更新上一次滚动位置
  initScrollTop = curScrollTop
  //当滚动的距离大于等于指定元素距离的时候
  if (curScrollTop >= categoryTopDistance.value) {
    //如果往下滚动
    if (scrollDown) {
      // 当滚动位置超过元素位置且向下滚动时的逻辑
      navActionStore.setFixedHeader(false)
    } else {
      navActionStore.setFixedHeader(true)
    }
  } else {
    categoryFixed.value = false
    navActionStore.setFixedHeader(false)
  }
}

onMounted(() => {
  //获取元素距离顶部的距离
  categoryTopDistance.value = document.querySelector('#category-list')!.getBoundingClientRect().top
  navActionStore.setShowHeader(true)
  navActionStore.setFixedHeader(false)
  navActionStore.setFixedCategory(false)
  navActionStore.setShowCategory(true)
  navActionStore.setFixedHeader(false)
  mitter.on('windowScroll', (curScrollTop: any) => {
    scrollHandler(curScrollTop)
  })
})

onUnmounted(() => {
  mitter.off('windowScroll')
})

function jump(item: any = { categoryCode: '' }) {
  if (!item.categoryCode) {
    router.push({
      name: 'CategoryVideo'
    })
    return
  }
  router.push({
    name: 'ChildCategoryVideo',
    params: {
      categoryCode: item.categoryCode
    }
  })
}
</script>

<style lang="less" scoped>
.category-video-body {
  margin-top: 30px;
  .category-list {
    display: flex;
    align-items: center;
    line-height: 30px;
    position: sticky;
    top: 0;
    height: 60px;
    background: #fff;
    z-index: 2;
    .category-title {
      font-style: 24px;
      margin-right: 40px;
      cursor: pointer;
    }
    .category-item {
      margin-right: 40px;
      font-style: 15px;
      cursor: pointer;
      border-bottom: 3px solid #fff;
      &:hover {
        color: var(--blue);
        border-color: var(--blue);
      }
    }
    .active {
      color: var(--blue);
      border-color: var(--blue);
    }
  }
  .category-fixed {
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
}
</style>
